<template>
  <div class="main">
    <div class="left-board border">
      <div class="left-scrollbar">
        <el-collapse
          v-model="activeCollapse"
          :accordion="true"
        >
          <el-collapse-item
            title="自定义控件"
            name="customControl"
          >
            <div class="btn-group">
              <div
                v-for="(item,index) in btnList"
                :key="'btn-item'+index"
                class="btn"
              >
                <div
                  class="btn-body"
                  @click="btnClick(item)"
                >
                  {{ item.name }}
                </div>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item
            title="定制控件"
            name="customizedControl"
          >
            <div class="btn-group">
              11111
            </div>
          </el-collapse-item>
        </el-collapse>
      </div>
    </div>
    <div class="center-board border">
      <div class="center-tool-bar border" />
      <div class="center-scrollbar">
        <div class="form">
          <el-form
            ref="form"
            label-width="auto"
            :inline="false"
            size="normal"
            :model="form"
          >
            <el-form-item
              v-for="(item,index) in formItemList"
              :key="'form-item'+index"
              :label="item.label"
              :label-width="item.width"
            >
              <el-row>
                <el-col :span="item.span">
                  <el-input
                    v-if="item.type==='input'"
                    v-model="form[`${item.key}`]"
                    :placeholder="`请输入${item.label}`"
                  />
                </el-col>
                <el-col :span="item.span">
                  <el-input
                    v-if="item.type==='textarea'"
                    type="textarea"
                    v-model="form[`${item.key}`]"
                    :placeholder="`请输入${item.label}`"
                  />
                </el-col>
                <el-col :span="item.span">
                  <el-switch
                    v-if="item.type==='switch'"
                    v-model="form[`${item.key}`]"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    :active-value="switchForm.active_value"
                    :inactive-value="switchForm.inactive_value"
                    :active-text="switchForm.active_txt"
                    :inactive-text="switchForm.inactive_txt"
                  />
                </el-col>
                <el-col :span="item.span">
                  <el-radio-group
                    v-if="item.type==='radio'"
                    v-model="form[`${item.key}`]"
                  >
                    <el-radio
                      v-for="(option,optionIndex) in item.options"
                      :label="option.value"
                      :key="optionIndex"
                    >
                      {{ option.label }}
                    </el-radio>
                  </el-radio-group>
                </el-col>
                <el-col :span="item.span">
                  <el-select
                    v-if="item.type==='select'"
                    v-model="form[`${item.key}`]"
                    :placeholder="`请选择${item.label}`"
                  >
                    <el-option
                      v-for="(option,optionIndex) in item.options"
                      :label="option.label"
                      :value="option.value"
                      :key="optionIndex"
                    />
                  </el-select>
                </el-col>
                <el-col :span="item.span">
                  <el-checkbox-group
                    v-if="item.type==='checkbox'"
                    v-model="form[`${item.key}`]"
                    @change="$forceUpdate()"
                  >
                    <el-checkbox
                      v-for="(option,optionIndex) in item.options"
                      :label="option.value"
                      :key="optionIndex"
                    >
                      {{ option.label }}
                    </el-checkbox>
                  </el-checkbox-group>
                </el-col>
              </el-row>
              <el-button
                style="margin-left:20px"
                type="text"
                size="default"
                @click="edit(index)"
              >
                编辑
              </el-button>
              <el-button
                style="margin-left:20px"
                type="text"
                size="default"
                @click="deletE(index)"
              >
                删除
              </el-button>
            </el-form-item>
          </el-form>
          <div>
            form:
            {{ form }}
          </div>
          <br>
          <div>
            formItemList:
            {{ formItemList }}
          </div>
          <br>
          <div>
            currentFormItem:
            {{ formItemList[currentIndex] }}
          </div>
          <!-- <el-button
            type="primary"
            size="default"
            @click="test"
          >
            test
          </el-button> -->
        </div>
      </div>
    </div>
    <div class="right-board border">
      <div class="right-scrollbar">
        <div class="form">
          <el-form
            v-if="formItemList.length > 0"
            ref="form"
            label-width="auto"
            :inline="false"
            size="normal"
          >
            <el-form-item label="标题">
              <el-input
                v-model="formItemList[currentIndex].label"
                placeholder="请输入标题"
                size="normal"
                clearable
              />
            </el-form-item>
            <el-form-item label="控件类型">
              <el-select
                v-model="formItemList[currentIndex].type"
                placeholder="请选择控件类型"
                size="normal"
                @change="didChangeFormItemType"
              >
                <el-option
                  v-for="(item,index) in itemTypes"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item label="标签宽度">
              <el-input
                v-model="formItemList[currentIndex].width"
                placeholder="请输入宽度"
                size="normal"
                clearable
              />
            </el-form-item>
            <el-form-item label="组件宽度">
              <el-slider
                v-model="formItemList[currentIndex].span"
                :max="24"
                :min="1"
              />
            </el-form-item>
            <el-form-item
              v-if="formItemList[currentIndex].type === 'radio' || formItemList[currentIndex].type === 'select' || formItemList[currentIndex].type === 'checkbox'"
              label="选项"
              size="normal"
            >
              <div
                v-for="(option,index) in formItemList[currentIndex].options"
                :key="index"
              >
                <el-input
                  v-model="option.label"
                  placeholder="展示字段"
                  size="normal"
                  clearable
                />
                <el-input
                  v-model="option.value"
                  placeholder="字段值"
                  size="normal"
                  clearable
                />
                <el-button
                  type="danger"
                  size="small"
                  @click="deleteOption(index)"
                >
                  -
                </el-button>
              </div>
              <el-button
                type="primary"
                size="small"
                @click="addOption"
              >
                +
              </el-button>
            </el-form-item>
            <el-form-item
              v-if="formItemList[currentIndex].type === 'switch'"
              label="选项"
              size="normal"
            >
              <el-input
                placeholder="开启键值"
                v-model="switchForm.active_value"
              />
              <el-input
                placeholder="开启文字"
                v-model="switchForm.active_txt"
              />
              <el-input
                placeholder="关闭键值"
                v-model="switchForm.inactive_value"
              />
              <el-input
                placeholder="关闭文字"
                v-model="switchForm.inactive_txt"
              />
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      id: 0,
      activeCollapse: ['customControl'], // 默认展开的折叠面板
      switchForm:{
        active_txt:null,
        inactive_txt:null,
        active_value:null,
        inactive_value:null
      },
      span:12,
      btnList: [ // 左侧添加控件按钮的list
        {
          name: '单行文本',
          type: 'input'
        },
        {
          name: '多行文本',
          type: 'textarea'
        },
        {
          name: '单选框',
          type: 'radio'
        },
        {
          name: '下拉选择',
          type: 'select'
        },
        {
          name: '多选框',
          type: 'checkbox'
        },
        {
          name: '开关',
          type: 'switch'
        }
      ],
      formItemList:[],
      form:{},
      currentIndex:0,
      formItemTemplate:[
        {
          type:'input',
          label:'单行文本',
          key:'',
          span:12,
          width:'100px',
        },
        {
          type: 'textarea',
          label: '多行文本',
          key: '',
          span:12,
          width:'100px',
        },
        {
          type: 'radio',
          label: '单选框',
          key: '',
          span:12,
          width:'100px',
          options:[
            {
              label:'选项1',
              value:'1'
            },
            {
              label:'选项2',
              value:'2'
            }
          ]
        },
        {
          type: 'select',
          label: '下拉选择',
          key: '',
          span:12,
          width:'100px',
          options:[
            {
              label:'选项1',
              value:'1'
            },
            {
              label:'选项2',
              value:'2'
            }
          ]
        },
        {
          type: 'checkbox',
          label: '多选框',
          key: '',
          span:12,
          width:'100px',
          options:[
            {
              label:'选项1',
              value:'1'
            },
            {
              label:'选项2',
              value:'2'
            }
          ]
        },
        {
          type: 'switch',
          label: '开关',
          key: '',
          span:12,
          width:'100px',
        },
      ],
    }
  },
  computed: {
    itemTypes() {
      return this.formItemTemplate.map(item => item.type)
    }
  },
  watch:{
    formItemTemplate: {
      handler:function(val) {
        console.log(val);
      },
      deep:true
    }
  },
  methods: {
    btnClick(btn) {
      this.id += 1
      const found = this.formItemTemplate.find(item => {
        return item.type === btn.type
      })
      const foundCopy = this._.cloneDeep(found)
      foundCopy.key = `item_${this.id}`
      if (foundCopy.type === 'checkbox') {
        this.form[foundCopy.key] = []
      }
      this.formItemList.push(foundCopy)
      console.log(this.formItemList)
    },
    edit(index) {
      this.currentIndex = index
    },
    deletE(index) {
      this.formItemList.splice(index,1)
    },
    addOption() {
      this.formItemList[this.currentIndex].options.push({label:'',value:''})
      this.$forceUpdate()
    },
    deleteOption(index) {
      this.formItemList[this.currentIndex].options.splice(index,1)
    },
    didChangeFormItemType(e) {
      // eslint-disable-next-line no-constant-condition
      if (e === 'radio' || 'select') {
        this.$set(this.formItemList[this.currentIndex],'options',[])
      }
    }
  }
}
</script>

<style scoped>
@keyframes btn-body-hover {
  100% {
    filter: brightness(1.06);
  }
}
.main {
  display: flex;
  flex-direction: row;

}
.border {
    border: 1px solid #f3f6f9;
}
.left-board {
    height:100vh;
    width: 400px;
}
.left-scrollbar {
    height: 100vh;
    overflow-y: scroll;
}
.center-board {
    height: 100vh;
    width: 100%;
}
.center-scrollbar {
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
}
.center-tool-bar {
    margin: 10px;
    padding: 10px;
}
.right-board {
    width:400px;
    height: 100vh;
}
.right-scrollbar {
    height: 100vh;
    overflow-y: scroll;
    overflow-x: hidden;
}
.btn-group {
    padding: 8px;
    height: 100%;
}
.btn {
    display: inline-block;
    width: 48%;
    margin: 1%;
}
.btn-body {
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    border-radius: 5px;
    background-color: #67c23a;
    color:#fff
}
.btn-body:hover {
  animation-name: btn-body-hover;
  animation-duration: 100ms;
  animation-fill-mode: forwards;
}

.form {
    margin: 10px;
}
</style>
